<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
        <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
        <style>
            .row { line-height: 30px ; margin: 5px auto ; }
            .row input[type=text] { line-height: 24px ; }
            .row>.left { text-align: right }
            .row>.right { text-align: left }
        </style>
        <script src="/javascripts/vue@3.0.11.js" ></script>
    </head>
    <body>

        <div class="container" id="app">
            <div class="row border">
                <div class="col-2 left">
                    单行文本框
                </div>
                <div class="col-4 right">
                    <input type="text" v-model.trim.lazy="message" placeholder="请输入单行文本">
                </div>
                <div class="col-6">{{message}}</div>
            </div>
            <div class="row border">
                <div class="col-2 left">
                    文本域
                </div>
                <div class="col-4 right">
                    <textarea v-model="description"></textarea>
                </div>
                <div class="col-6">
                    <textarea>{{description}}</textarea>
                </div>
            </div>
            <div class="row border">
                <div class="col-2 left">
                    单选按钮
                </div>
                <div class="col-4 right">
                    <input type="radio" v-model="gender" value="male" id="male-gender">
                    <label for="male-gender">男</label>
                    <input type="radio" v-model="gender" value="female" id="female-gender">
                    <label for="female-gender">女</label>
                </div>
                <div class="col-6">{{gender}}</div>
            </div>
            <div class="row border">
                <div class="col-2 left">
                    单个复选框
                </div>
                <div class="col-4 right">
                    <input type="checkbox" v-model="isAgree" id="agreement">
                    <label for="agreement">{{agreement}}</label>
                </div>
                <div class="col-6">{{isAgree}}</div>
            </div>

            <div class="row border">
                <div class="col-2 left">
                    多个复选框
                </div>
                <div class="col-4 right">
                    <input type="checkbox" v-model="foods" value="肘子乐开花" id="zhouzi">
                    <label for="zhouzi">肘子乐开花</label>
                    <input type="checkbox" v-model="foods" value="葫芦头泡馍" id="dachang">
                    <label for="dachang">葫芦头泡馍</label>
                    <input type="checkbox" v-model="foods" value="回锅肉" id="feiguorou">
                    <label for="feiguorou">回锅肉</label>
                </div>
                <div class="col-6">{{foods}}</div>
            </div>
            <div class="row border">
                <div class="col-2 left">
                    下拉框(单选)
                </div>
                <div class="col-4 right">
                    <select v-model="group">
                        <option disabled >请选择你最中意的小组名称</option>
                        <option value="linxiao">凌霄</option>
                        <option value="kangbage">扛霸哥</option>
                        <option value="suhui">溯洄</option>
                        <option value="mayi">蚂蚁</option>
                        <option value="qinghe" selected>青禾</option>
                        <option value="wuyanzu">吴彦组</option>
                    </select>
                </div>
                <div class="col-6">{{group}}</div>
            </div>
            <div class="row border">
                <div class="col-2 left">
                    下拉框(多选)
                </div>
                <div class="col-4 right">
                    <select v-model="searchs" multiple>
                        <option value="google.com">谷歌</option>
                        <option value="bing.com">必应</option>
                        <option value="baidu.com">百度</option>
                    </select>
                </div>
                <div class="col-6">{{searchs}}</div>
            </div>
        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        message: '宏弘咋了',
                        gender: '',
                        isAgree: true ,
                        foods: ['回锅肉'],
                        group: 'mayi' ,
                        searchs: [] ,
                        description: '我是一个来自马踏飞燕的故乡的飞燕'
                    }
                },
                computed: {
                    agreement(){
                        return this.isAgree ? '已同意' : '待同意(勾选即可同意)' ;
                    }
                }
            });
            console.log( app );
            const vm = app.mount( '#app');
            console.log( vm )
        </script>

    </body>
</html>